<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<title>봉사활동  조회</title>
<meta charset="euc-kr">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">  -->
 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">  

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- #777 -->

<style type="text/css"> 
	
	#aab {margin:0;padding:0;}
	#aac {margin:0;padding:0;}
	.table1{border-collapse:collapse;}

TH { FONT: 12px/160%  "바탕",Verdana, Arial, sans-serif; TEXT-DECORATION: none ; text-align:justify;}

.table1{width:100%;border-spacing:0;}
.table1 td{border:0;height:25px; text-align:center; padding:5px 0px 5px 0px;  color:#777; border-bottom:#c7c7c7 1px solid;border-left:#c7c7c7 1px solid; background:#fff;  FONT: 12px/160%  "돋움",Verdana, Arial, sans-serif;COLOR:black; TEXT-DECORATION: none;}
.table1 th{border:0;height:30px; text-align:center;  color:black; background:#fff; border-bottom:#c7c7c7 1px solid;border-left:#c7c7c7 1px solid;  FONT: 14px/160%  "돋움",Verdana, Arial, sans-serif;COLOR:black; TEXT-DECORATION: none;}
.table1 th{background:#87CEFB; border-top:#7bc142 2px solid;  color:black; padding:5px 0px 5px 0px;  font-weight:bold;}
	#textAlign{text-align:left;}
</style>


</head>
<body>
<input type="text" id="calcNum" name="calcNum" value="0" style="display:none;"/>
	<div data-role="page" id="aab"><!-- id는 나중에 페이지 전환을 위해 필요 -->
		<!-- 해더 -->
		<div data-role="header"><!-- data-position="fixed" 헤더 고정 -->
			<h1>봉사활동</h1><!-- <strong> -->
		</div>
		<!-- 내용 -->
		<div data-role="content" id="aac">
			<table style="width:100%" > 
				<tr >
					<td style="text-align:right; width:40%;"><button type="button" data-icon="arrow-l" value="이전" id="pre" data-inline="true" /></td>
					<td id="selectedYearMonth" style="text-align:center; width=20%;"></td>
					<td style="text-align:left; width:40%;"><button type="button" data-icon="arrow-r" value="다음" id="next" data-iconpos="right" data-inline="true" /></td>
					
					<!-- <td><input type="reset" value="left" data-icon="arrow-l" data-iconpos="left" id="pre" /></td>
					<td align="center" id="selectedYearMonth"></td>
					<td><input type="image" value="rigth" data-icon="arrow-r" data-iconpos="right" id="next" /></td> -->
				</tr>
			</table>
			<div id="inner_table">
			</div>	
		</div>
	</div>

</body>
<script type="text/javascript">
function parseJson(result){
	// 1. 값 초기화
	$("#selectedYearMonth").text("");
	$("#inner_table").text("");
	
	//get month
	$("#selectedYearMonth").html("<strong><font color='blue'>"+result.yearmonth+"</font></strong>");
	
	// 2. 파싱(데이터처리)
	var html = "";
	
	html += "<table id='mainTable' style='width:100%;margin:0' class='table1'>\r\n";
	html += "<tr>\r\n";
	html += "<th width='15%'>날짜</th>\r\n";
	html += "<th width='25%'>시간</th>\r\n";
	html += "<th colspan='2'width='60%'>봉사활동내역</th>\r\n";
	html += "</tr>\r\n";
	
	if(result.data.length != 0){
		//alert("Length :"+result.data.length);
		for(var i = 0; i < result.data.length ; i++){
			
			html += "<tr> \r\n<td>" + result.data[i].SERVICE_DATE.substring(5,10) + "</td>";
			html += "\r\n<td>" + result.data[i].SERVICE_START_TIME +"~"+ result.data[i].SERVICE_END_TIME +"</td>";//time
			html += "\r\n<td id='textAlign'>" + result.data[i].SERVICE_NAME + "</td>";//내용
			//html += "";<font color='red'>" + result.data[i].POSS_YN + "</font>
			if(result.data[i].POSS_YN == '불가'){
				html += "\r\n<td>" + "-" + "</td>\r\n</tr>\r\n";
			}else{
				html += "\r\n<td><font color='blue'>"+result.data[i].POSS_NUMBER+"명 "+ "</font></td>\r\n</tr>\r\n";
			}
			//alert(html);
			//alert(result.data[1].SERVICE_NAME);
		}
	}else{
		html += "<tr><td colspan='4'>조회된 데이터가 없습니다.</td></tr>"
	}
	//alert(html);
  	html += "</table>\r\n";
  	$("#inner_table").html(html);
}
//XML데이터/현재 달 받아오기
$(document).ready(function(){
	
	

	//이전 달
	$("#pre").click(function(){
		var calcNum = $("#calcNum").val();
				
		calcNum = calcNum - 1;
		
		var num = calcNum;
		var selectedYear = $("#selectedYearMonth").text();
		$("#inner_table").val("");
		
		$.ajax({
			type: "GET",
			url: "/business/mVolunteer/output.do",
			data:{"num":num, "selectedYear":selectedYear},
			dataType: "json",
			beforeSend: function(){
				//loading...
			$.mobile.showPageLoadingMsg(); 
			
			},
			success: function(result) {
				//end_loading
			$.mobile.hidePageLoadingMsg();
		
				/*
				var array_data = data.split(",");
				var data0 = array_data[1];
				var data1 = array_data[2];
				$("#selectedYearMonth").text("");
				$("#selectedYearMonth").text(data0);
				parseXml(data1);
				*/
				parseJson(result);
			},
			error: function(request, status, error){
				alert("조회에 실패하였습니다. 다시 시도하시기 바랍니다.");
			}
		});
		$("#calcNum").val(calcNum);
	});
	
	//다음 달 
	$("#next").click(function(){

		var calcNum = $("#calcNum").val();
		//if(calcNum >= 0){
		//	alert("현재년월 이후는 조회가 불가능합니다.");
		//}else{ 
			calcNum = parseInt(calcNum) + 1;
			
			//alert("Num : "+calcNum);
			var num = calcNum;
			var selectedYear = $("#selectedYearMonth").text();
			$("#inner_table").val("");
			
			$.ajax({
				type: "GET",
				url: "/business/mVolunteer/output.do",
				data:{"num":num, "selectedYear":selectedYear},
				dataType: "json",
				beforeSend: function(){
					// loading... 
				$.mobile.showPageLoadingMsg();
				},
				success: function(result) {
					
				$.mobile.hidePageLoadingMsg();
					/*
					var array_data = data.split(",");
					$("#selectedYearMonth").text("");
					var data0 = array_data[1];
					var data1 = array_data[2];
					$("#selectedYearMonth").text(data0);
					parseXml(data1);
					*/
					parseJson(result);
				},
				error: function(request, status, error){
					alert("조회에 실패하였습니다. 다시 시도하시기 바랍니다.");
				}
			});
			$("#calcNum").val(calcNum);
			
		//}
	});
	
	
	$.ajax({
		type: "GET",
		url: "/business/mVolunteer/output.do",
		dataType : "json",
		success: function(result) {
			//alert(2);
		parseJson(result);
		},
		error: function(request, status, error){
			alert("조회에 실패하였습니다. 다시 시도하시기 바랍니다.");
		}
	});
});

</script>
</html>